/* provide flex utilities in lieu of float based layouts */

.flex, :local(.flex) {
    display: flex;
}

.flex-full, :local(.flex-full) {
    flex: 1;
}

.flex-half, :local(.flex-half) {
    flex: 0.5;
}

.flex-no-shrink, :local(.flex-no-shrink) {
    flex-shrink: 0;
}

/* The behavior of how `flex: <flex-grow>` sets flex-basis is inconsistent across
 * browsers. Specifically:
 * - On Chrome and FF it's set to `flex-basis: 0%`. That behaves equally as `height: 0%`.
 *   It means that if the containing block has no explicit height, then `height: 0%` is computed as `height: auto`,
 *   and element grows as its content grows. That is the most common scenario in Metabase codebase.
 * - On older IEs it's set to `flex-basis: 0` which means that the initial main size of flex item is zero.
 *   It is also notable that `flex-basis: 0%` doesn't work correctly on IE.
 *
 *  As a solution, `flex-basis-auto` should always be used in conjunction with `flex-full` when it is
 *  a desired behavior that the element grows with its contents.
*/
.flex-basis-auto {
    flex-basis: auto;
}

.shrink-below-content-size {
    /* W3C spec says:
     * By default, flex items won’t shrink below their minimum content size (the length of the longest word or
     * fixed-size element). To change this, set the min-width or min-height property.
     */
    min-width: 0;
}

.align-center, :local(.align-center) {
    align-items: center;
}

.align-baseline, :local(.align-baseline) {
    align-items: baseline;
}

.justify-center, :local(.justify-center) {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-self-end, :local(.align-self-end) {
    align-self: flex-end;
}

.flex-align-right, :local(.flex-align-right) {
    margin-left: auto;
}

@media screen and (--breakpoint-min-sm) {
    .sm-flex-align-right { margin-left: auto; }
}

@media screen and (--breakpoint-min-md) {
    .md-flex-align-right { margin-left: auto; }
}

@media screen and (--breakpoint-min-lg) {
    .lg-flex-align-right { margin-left: auto; }
}

.layout-centered, :local(.layout-centered) {
  align-items: center;
  justify-content: center;
}

@media screen and (--breakpoint-min-sm) {
    .sm-layout-centered {
        align-items: center;
        justify-content: center;
    }
}

@media screen and (--breakpoint-min-md) {
    .md-layout-centered {
        align-items: center;
        justify-content: center;
    }
}

@media screen and (--breakpoint-min-lg) {
    .lg-layout-centered {
        align-items: center;
        justify-content: center;
    }
}

.flex-column { flex-direction: column; }

@media screen and (--breakpoint-min-sm) {
    .sm-flex-column { flex-direction: column; }
}

@media screen and (--breakpoint-min-md) {
    .md-flex-column { flex-direction: column; }
}

.flex-row, :local(.flex-row) {
  flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-reverse { flex-direction: row-reverse; }

@media screen and (--breakpoint-min-sm) {
    .sm-flex-reverse { flex-direction: row-reverse; }
}

@media screen and (--breakpoint-min-md) {
    .md-flex-reverse { flex-direction: row-reverse; }
}

@media screen and (--breakpoint-min-lg) {
    .lg-flex-reverse { flex-direction: row-reverse; }
}

@media screen and (--breakpoint-min-xl) {
    .xl-flex-reverse { flex-direction: row-reverse; }
}

.no-flex {
    flex: 0 1 0%;
}

@media screen and (--breakpoint-min-md) {
    .md-no-flex { flex: 0 !important; }
}

/* Contents of elements inside flex items might not be wrapped correctly on IE11,
   set max-width manually to enforce wrapping
*/
.ie-wrap-content-fix {
   max-width: 100%;
}